<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>上传音乐 | SoundWave音乐</title>

    <!-- 优化资源加载 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>

    <!-- 内联关键CSS提升加载速度 -->
    <style type="text/css">
        /* 保持原有CSS样式不变 */
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #21094e 0%, #511281 100%);
            color: #f0f0f0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
            padding: 20px;
        }

        /* 背景装饰 */
        .bg-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
            background-size: 30px 30px;
            z-index: 0;
        }

        .floating-element {
            position: absolute;
            opacity: 0.05;
            animation: float 20s infinite ease-in-out;
            will-change: transform, opacity;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.05; }
            50% { transform: translateY(-80px) rotate(10deg); opacity: 0.1; }
        }

        /* 失败时的漂浮文件元素 */
        .error-float-file {
            position: absolute;
            color: rgba(239, 68, 68, 0.7);
            opacity: 0;
            z-index: 10;
            animation: errorFloat 8s infinite ease-in-out;
        }

        @keyframes errorFloat {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0.7; }
            50% { transform: translateY(50vh) rotate(15deg); opacity: 0.4; }
            100% { transform: translateY(-20vh) rotate(30deg); opacity: 0; }
        }

        /* 成功时的漂浮文件元素 */
        .success-float-file {
            position: absolute;
            color: rgba(34, 197, 94, 0.7);
            opacity: 0;
            z-index: 10;
            animation: successFloat 8s infinite ease-in-out;
        }

        @keyframes successFloat {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0.7; }
            50% { transform: translateY(50vh) rotate(-15deg); opacity: 0.4; }
            100% { transform: translateY(-20vh) rotate(-30deg); opacity: 0; }
        }

        /* 容器样式 */
        .container {
            position: relative;
            z-index: 1;
            max-width: 700px;
            margin: 50px auto;
            padding: 30px;
        }

        /* 标题样式 */
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }

        .page-title {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(90deg, #a855f7, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-flex;
            align-items: center;
            gap: 15px;
        }

        .page-title i {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .page-subtitle {
            color: rgba(255, 255, 255, 0.6);
            margin-top: 10px;
            font-size: 1.1rem;
        }

        /* 上传卡片样式 */
        .upload-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .upload-card:hover {
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            transform: translateY(-5px);
        }

        .upload-card.error {
            border-color: rgba(239, 68, 68, 0.5);
            animation: shake 0.5s ease-in-out;
        }

        .upload-card.success {
            border-color: rgba(34, 197, 94, 0.5);
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-10px); }
            40% { transform: translateX(10px); }
            60% { transform: translateX(-5px); }
            80% { transform: translateX(5px); }
        }

        /* 上传区域样式 */
        .upload-area {
            border: 2px dashed rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }

        .upload-area.error {
            border-color: rgba(239, 68, 68, 0.5);
            background: rgba(239, 68, 68, 0.05);
        }

        .upload-area.success {
            border-color: rgba(34, 197, 94, 0.5);
            background: rgba(34, 197, 94, 0.05);
        }

        .upload-area::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: all 0.6s ease;
        }

        .upload-area:hover::before {
            left: 100%;
        }

        .upload-area:hover {
            border-color: #a855f7;
            background: rgba(255, 255, 255, 0.07);
        }

        .upload-icon {
            font-size: 4rem;
            color: rgba(168, 85, 247, 0.5);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .upload-area:hover .upload-icon {
            color: #a855f7;
            transform: scale(1.1);
        }

        .upload-area.error .upload-icon {
            color: rgba(239, 68, 68, 0.7);
            animation: errorPulse 1s infinite;
        }

        .upload-area.success .upload-icon {
            color: rgba(34, 197, 94, 0.7);
            animation: successPulse 1s infinite;
        }

        @keyframes errorPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        @keyframes successPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .upload-text h3 {
            margin-bottom: 10px;
            color: #f0f0f0;
        }

        .upload-text p {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }

        #file-input {
            display: none;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #f0f0f0;
        }

        .form-control {
            width: 100%;
            padding: 14px 20px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: #fff;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-control.error {
            border-color: rgba(239, 68, 68, 0.5);
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
        }

        .form-control:focus {
            outline: none;
            border-color: #a855f7;
            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
            background: rgba(255, 255, 255, 0.1);
        }

        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        /* 按钮样式 */
        .btn {
            padding: 12px 30px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: all 0.6s ease;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: linear-gradient(90deg, #a855f7, #7e22ce);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
        }

        .btn-secondary {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #f0f0f0;
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-2px);
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
        }

        /* 文件预览样式 */
        .file-preview {
            display: none;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .file-preview.show {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .file-icon {
            font-size: 1.8rem;
            color: #a855f7;
        }

        .file-details {
            flex: 1;
        }

        .file-name {
            font-weight: 600;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-size {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .remove-file {
            color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .remove-file:hover {
            color: #ef4444;
        }

        /* 进度条样式 */
        .progress-container {
            display: none;
            margin-top: 30px;
        }

        .progress-container.show {
            display: block;
        }

        .progress-bar {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #a855f7, #ec4899);
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 4px;
        }

        .progress-fill.error {
            background: linear-gradient(90deg, #ef4444, #dc2626);
        }

        .progress-fill.success {
            background: linear-gradient(90deg, #22c55e, #16a34a);
        }

        .progress-text {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.6);
        }

        /* 提示消息样式 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 8px;
            background: rgba(33, 9, 78, 0.9);
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transform: translateX(120%);
            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast-success {
            border-left: 4px solid #22c55e;
            animation: successToast 0.5s ease-in-out;
        }

        .toast-error {
            border-left: 4px solid #ef4444;
            animation: errorToast 0.5s ease-in-out;
        }

        @keyframes errorToast {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-10px); }
            40% { transform: translateX(10px); }
            60% { transform: translateX(-5px); }
            80% { transform: translateX(5px); }
        }

        @keyframes successToast {
            0% { transform: translateX(120%); }
            70% { transform: translateX(-10px); }
            100% { transform: translateX(0); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                margin: 20px auto;
                padding: 15px;
            }

            .upload-card {
                padding: 25px 20px;
            }

            .upload-area {
                padding: 30px 15px;
            }

            .button-group {
                flex-direction: column;
                gap: 15px;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .page-title {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
<!-- 背景装饰 -->
<div class="bg-pattern"></div>

<!-- 动态漂浮元素 -->
<i class="fas fa-music floating-element" style="font-size: 5rem; top: 10%; left: 5%; animation-delay: 0s;"></i>
<i class="fas fa-compact-disc floating-element" style="font-size: 4rem; top: 60%; left: 10%; animation-delay: 2s;"></i>
<i class="fas fa-headphones floating-element" style="font-size: 6rem; top: 30%; left: 85%; animation-delay: 1s;"></i>
<i class="fas fa-microphone floating-element" style="font-size: 4rem; top: 70%; left: 80%; animation-delay: 3s;"></i>

<div class="container">
    <div class="page-header">
        <h1 class="page-title">
            <i class="fas fa-cloud-upload-alt"></i>
            上传音乐
        </h1>
        <p class="page-subtitle">分享你的音乐，让更多人听到</p>
    </div>

    <div class="upload-card" id="upload-card">
        <form id="upload-form" method="POST" enctype="multipart/form-data" action="/music/upload">
            <!-- 上传区域 -->
            <div class="upload-area" id="upload-area">
                <div class="upload-icon">
                    <i class="fas fa-music"></i>
                </div>
                <div class="upload-text">
                    <h3>拖放音乐文件到此处，或点击上传</h3>
                    <p>支持 MP3 格式，文件大小不超过 10MB</p>
                </div>
                <input type="file" name="filename" id="file-input" accept="audio/mpeg">
            </div>

            <!-- 文件预览 -->
            <div class="file-preview" id="file-preview">
                <div class="file-info">
                    <div class="file-icon">
                        <i class="fas fa-file-audio"></i>
                    </div>
                    <div class="file-details">
                        <div class="file-name" id="preview-filename">filename</div>
                        <div class="file-size" id="preview-filesize">0 MB</div>
                    </div>
                    <div class="remove-file" id="remove-file">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            </div>

            <!-- 歌手名输入 -->
            <div class="form-group">
                <label class="form-label" for="singer">歌手名</label>
                <input type="text" name="singer" id="singer" class="form-control" placeholder="请输入歌手名">
            </div>

            <!-- 上传进度 -->
            <div class="progress-container" id="progress-container">
                <div class="progress-bar">
                    <div class="progress-fill" id="progress-fill"></div>
                </div>
                <div class="progress-text">
                    <span id="progress-percentage">0%</span>
                    <span id="progress-status">准备上传...</span>
                </div>
            </div>

            <!-- 按钮组 -->
            <div class="button-group">
                <a href="list.html" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i>
                    返回音乐库
                </a>
                <button type="submit" class="btn btn-primary" id="upload-btn">
                    <i class="fas fa-upload"></i>
                    开始上传
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 提示消息元素 -->
<div class="toast" id="toast-message"></div>

<script type="text/javascript">
    // 预定义DOM选择器和工具函数
    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const uploadArea = $('#upload-area');
        const fileInput = $('#file-input');
        const filePreview = $('#file-preview');
        const previewFilename = $('#preview-filename');
        const previewFilesize = $('#preview-filesize');
        const removeFile = $('#remove-file');
        const uploadForm = $('#upload-form');
        const progressContainer = $('#progress-container');
        const progressFill = $('#progress-fill');
        const progressPercentage = $('#progress-percentage');
        const progressStatus = $('#progress-status');
        const uploadBtn = $('#upload-btn');
        const singerInput = $('#singer');
        const uploadCard = $('#upload-card');

        // 检查URL参数中是否有错误信息
        checkForUploadErrors();

        // 上传区域点击触发文件选择
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        // 拖放功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#a855f7';
            uploadArea.style.background = 'rgba(255, 255, 255, 0.07)';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.2)';
            uploadArea.style.background = 'transparent';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.2)';
            uploadArea.style.background = 'transparent';

            if (e.dataTransfer.files.length) {
                handleFile(e.dataTransfer.files[0]);
            }
        });

        // 处理文件选择
        fileInput.addEventListener('change', () => {
            clearStatusStates();
            if (fileInput.files.length) {
                handleFile(fileInput.files[0]);
            }
        });

        // 移除选中的文件
        removeFile.addEventListener('click', () => {
            fileInput.value = '';
            filePreview.classList.remove('show');
            uploadBtn.disabled = true;
            uploadBtn.style.opacity = '0.7';
            clearStatusStates();
        });

        // 处理文件预览
        function handleFile(file) {
            // 验证文件类型
            if (!file.type.match('audio/mpeg')) {
                showUploadError('请上传MP3格式的音频文件');
                return;
            }

            // 验证文件大小 (10MB)
            if (file.size > 10 * 1024 * 1024) {
                showUploadError('文件大小不能超过10MB');
                return;
            }

            // 显示文件预览
            previewFilename.textContent = file.name;
            previewFilesize.textContent = (file.size / (1024 * 1024)).toFixed(2) + ' MB';
            filePreview.classList.add('show');

            // 启用上传按钮
            uploadBtn.disabled = false;
            uploadBtn.style.opacity = '1';
        }

        // 处理表单提交
        uploadForm.addEventListener('submit', function(e) {
            // 阻止默认表单提交
            e.preventDefault();

            // 验证是否选择了文件
            if (!fileInput.files.length) {
                showUploadError('请先选择要上传的音乐文件');
                return;
            }

            // 验证歌手名
            if (!singerInput.value.trim()) {
                showUploadError('请输入歌手名');
                singerInput.focus();
                return;
            }

            // 显示进度条
            progressContainer.classList.add('show');
            uploadBtn.disabled = true;
            uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 上传中...';

            // 创建FormData对象
            const formData = new FormData(uploadForm);

            // 使用AJAX上传文件
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/music/upload', true);

            // 上传进度处理
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    const percent = (e.loaded / e.total) * 100;
                    progressFill.style.width = percent + '%';
                    progressPercentage.textContent = Math.round(percent) + '%';

                    if (percent < 30) {
                        progressStatus.textContent = '正在准备上传...';
                    } else if (percent < 70) {
                        progressStatus.textContent = '正在上传文件...';
                    } else {
                        progressStatus.textContent = '正在处理文件...';
                    }
                }
            });

            // 上传完成处理 - 修复核心判断逻辑
            xhr.addEventListener('load', function() {
                try {
                    // 尝试解析响应
                    const response = JSON.parse(xhr.responseText);

                    // 服务器返回200状态码表示请求成功
                    if (xhr.status === 200) {
                        // 根据后端定义的成功状态码判断
                        // 通常0表示成功，非0表示失败
                        if (response.status === 0) {
                            // 上传成功处理
                            showUploadSuccess(response.message || '文件上传成功');
                        } else {
                            // 服务器返回业务错误
                            showUploadError(response.message || '上传失败，请重试');
                        }
                    } else {
                        // HTTP状态码非200，说明请求失败
                        showUploadError(`上传失败，HTTP状态码: ${xhr.status}`);
                    }
                } catch (error) {
                    // JSON解析失败，可能是服务器返回格式错误
                    console.error('解析响应失败:', error);
                    // 检查是否实际上传成功（有些服务器成功时可能不返回JSON）
                    if (xhr.status === 200) {
                        showUploadSuccess('文件上传成功');
                    } else {
                        showUploadError('上传失败，无法解析服务器响应');
                    }
                }
            });

            // 网络错误处理
            xhr.addEventListener('error', function() {
                showUploadError('网络错误，上传失败');
            });

            // 超时处理
            xhr.addEventListener('abort', function() {
                showUploadError('上传已取消');
            });

            // 发送请求
            xhr.send(formData);
        });

        // 显示上传成功
        function showUploadSuccess(message) {
            // 清除所有状态样式
            clearStatusStates();

            // 添加成功状态样式
            uploadCard.classList.add('success');
            uploadArea.classList.add('success');

            // 更新进度条为成功状态
            progressContainer.classList.add('show');
            progressFill.classList.add('success');
            progressFill.style.width = '100%';
            progressPercentage.textContent = '100%';
            progressStatus.textContent = '上传成功!';

            // 显示成功提示
            showToast(message, 'success');

            // 创建漂浮的成功文件元素
            createFloatingSuccessFiles(5);

            // 3秒后跳转到音乐列表页
            setTimeout(() => {
                window.location.href = 'list.html';
            }, 3000);
        }

        // 显示上传错误
        function showUploadError(message) {
            // 清除所有状态样式
            clearStatusStates();

            // 显示错误提示
            showToast(message, 'error');

            // 添加错误状态样式
            uploadCard.classList.add('error');
            uploadArea.classList.add('error');
            if (singerInput.value.trim() === '') {
                singerInput.classList.add('error');
            }

            // 更新进度条为错误状态
            progressContainer.classList.add('show');
            progressFill.classList.add('error');
            progressFill.style.width = '100%';
            progressPercentage.textContent = '上传失败';
            progressStatus.textContent = message;

            // 重置上传按钮
            uploadBtn.disabled = false;
            uploadBtn.innerHTML = '<i class="fas fa-upload"></i> 重新上传';

            // 创建漂浮的错误文件元素
            createFloatingErrorFiles(5);
        }

        // 创建漂浮的成功文件元素
        function createFloatingSuccessFiles(count) {
            // 先移除已有的漂浮文件
            document.querySelectorAll('.success-float-file').forEach(el => el.remove());

            const fileIcons = ['fas fa-file-audio', 'fas fa-file-music', 'fas fa-music', 'fas fa-compact-disc'];

            for (let i = 0; i < count; i++) {
                const fileEl = document.createElement('i');
                const randomIcon = fileIcons[Math.floor(Math.random() * fileIcons.length)];
                const size = Math.random() * 30 + 20; // 20-50px
                const left = Math.random() * 100; // 0-100%
                const delay = Math.random() * 5; // 0-5s 延迟

                fileEl.className = `success-float-file ${randomIcon}`;
                fileEl.style.fontSize = `${size}px`;
                fileEl.style.left = `${left}%`;
                fileEl.style.animationDelay = `${delay}s`;

                document.body.appendChild(fileEl);

                // 动画结束后移除元素
                setTimeout(() => {
                    if (fileEl.parentNode) {
                        fileEl.parentNode.removeChild(fileEl);
                    }
                }, 8000);
            }
        }

        // 创建漂浮的错误文件元素
        function createFloatingErrorFiles(count) {
            // 先移除已有的漂浮文件
            document.querySelectorAll('.error-float-file').forEach(el => el.remove());

            const fileIcons = ['fas fa-file-audio', 'fas fa-file-music', 'fas fa-music', 'fas fa-compact-disc'];

            for (let i = 0; i < count; i++) {
                const fileEl = document.createElement('i');
                const randomIcon = fileIcons[Math.floor(Math.random() * fileIcons.length)];
                const size = Math.random() * 30 + 20; // 20-50px
                const left = Math.random() * 100; // 0-100%
                const delay = Math.random() * 5; // 0-5s 延迟

                fileEl.className = `error-float-file ${randomIcon}`;
                fileEl.style.fontSize = `${size}px`;
                fileEl.style.left = `${left}%`;
                fileEl.style.animationDelay = `${delay}s`;

                document.body.appendChild(fileEl);

                // 动画结束后移除元素
                setTimeout(() => {
                    if (fileEl.parentNode) {
                        fileEl.parentNode.removeChild(fileEl);
                    }
                }, 8000);
            }
        }

        // 清除所有状态样式
        function clearStatusStates() {
            uploadCard.classList.remove('error', 'success');
            uploadArea.classList.remove('error', 'success');
            singerInput.classList.remove('error');
            progressFill.classList.remove('error', 'success');
        }

        // 检查URL参数中是否有错误信息
        function checkForUploadErrors() {
            const params = new URLSearchParams(window.location.search);
            const error = params.get('error');
            const message = params.get('message');
            const success = params.get('success');

            if (success) {
                showUploadSuccess(message || '上传成功');
            } else if (error) {
                showUploadError(message || '上传失败，请重试');
            }
        }

        // 显示提示消息
        function showToast(message, type = 'success') {
            const toast = $('#toast-message');
            toast.className = 'toast';
            toast.classList.add(`toast-${type}`);
            toast.innerHTML = type === 'success'
                ? `<i class="fas fa-check-circle"></i> ${message}`
                : `<i class="fas fa-exclamation-circle"></i> ${message}`;

            toast.classList.add('show');

            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        // 初始化禁用上传按钮
        uploadBtn.disabled = true;
        uploadBtn.style.opacity = '0.7';
    });
</script>
</body>
</html>
